<template>
  <div>
    <h2>HOME</h2>
    <div>
      <!-- router-link中to的字符串写法,只能书写路由地址 -->
      <!-- <router-link to="/home/news">news</router-link>
      <router-link to="/home/music">music</router-link> -->

      <!-- router-link中to的对象写法 可以通过path属性来设置路由地址 -->
      <!-- <router-link
        :to="{
          path: '/home/music',
        }"
        >music</router-link
      >
      <router-link
        :to="{
          path: '/home/news',
        }"
        >news</router-link
      > -->

      <!-- 
        router-link中to的对象写法 可以通过路由的name属性来设置路由地址
       -->
      <router-link
        :to="{
          name: 'music',
        }"
        >music</router-link
      >
      <router-link
        :to="{
          name: 'news',
        }"
        >news</router-link
      >
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>